<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-04-17 22:17:02
 * @LastEditors: Ansel
 * @LastEditTime: 2020-04-22 21:15:00
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* .center{
      text-align:center;
    }
    .inlineblock-div{
      display:inline-block;
    } */


    /* margin */
    /* .main{
      width: 100%;
    }
    .center{
      width: 100px;
      height: 100px;
      margin:0 auto;
    } */


    /* position */
    /* .main{
      width: 100%;
      position: relative;
    }
    .main .center{
      position: absolute;
      width: 100px;
      height: 100px;
      left:calc(50% - 100px);
    } */

    /* flex */
    /* .main{
      display: flex;
      justify-content: center;
    }
    .main .center{
    } */

    /* table */
    .main{
      /* display: table; */
      
    }

    .center{
      width: 100%;
      height: 100px; 
      display: table-cell;
      text-align: center;
      vertical-align: center;
      display: inline-block;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="center">1</div>
        <!-- <div class="inlineblock-div">2</div> -->
    </div>
</body>
</html>